let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件
    entry: "./src/index.js",
    output: {
        // 输出文件名
        filename: "bundle.js",
        // 输出路径
        path: path.resolve(__dirname, 'dist')
    },
    // 模式设置: development、production、none
    mode: "development",
    // loader 的配置
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    // use 数组中的 loader 执行顺序: 从下到上, 逆序执行。
                    // 将 js 的样式内容插入到 style 标签里。
                    "style-loader",
                    // 将 css 文件转换为 js
                    "css-loader"
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                // 图片小于 8KB， base64 处理，优点：减少网络请求，缺点：体积会更大
                options: {
                    limit: 8*1024,
                    // 关闭 url-loader 的 es6 模块化解析
                    esModule: false,
                    // 文件名处理：取文件hash 前十位，ext 是文件扩展名
                    name: '[hash:10].[ext]'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ],
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    devServer: {
        // 项目构建路径
        contentBase: path.resolve(__dirname, 'dist'),
        // 端口号
        port: 3000,
        // 启用 gzip 压缩
        compress: true,
        // 自动打开浏览器
        open: true
    }
}